<script setup>
import { ref, watch, computed } from 'vue'

const props = defineProps({
	isLoading: Boolean,
	resultData: Object,
})

// 计算进度百分比
const currentPercentage = ref(0)
const currentStep = ref(0)

// 步骤配置
const steps = [
	{ threshold: 20, text: '初始化系统' },
	{ threshold: 40, text: '分析合金成分' },
	{ threshold: 60, text: '计算热导率' },
	{ threshold: 80, text: '计算电导率' },
	{ threshold: 99, text: '生成最终结果' },
]

// 动画计时器
let progressInterval = null

// 开始模拟进度动画
const startSimulatedProgress = () => {
	clearInterval(progressInterval)
	currentPercentage.value = 0
	currentStep.value = 0

	const startTime = Date.now()
	const duration = 4500 // 动画总时长

	progressInterval = setInterval(() => {
		const elapsed = Date.now() - startTime
		const progress = Math.min(elapsed / duration, 1)
		// 使用缓动函数使动画更自然
		const easedProgress = progress * (2 - progress)
		currentPercentage.value = Math.floor(easedProgress * 99)

		// 更新当前步骤
		for (let i = 0; i < steps.length; i++) {
			if (currentPercentage.value >= steps[i].threshold) {
				currentStep.value = i + 1
			}
		}

		// 动画完成时清除计时器
		if (progress >= 1) {
			clearInterval(progressInterval)
		}
	}, 16)
}

// 监听加载状态变化
watch(
	() => props.isLoading,
	(loading) => {
		if (loading) {
			startSimulatedProgress()
		} else {
			// 加载完成时立即显示100%
			clearInterval(progressInterval)
			currentPercentage.value = 100
			currentStep.value = steps.length
		}
	}
)

// 计算结果数据
const resultValues = computed(() => {
	if (!props.resultData) return null

	return {
		thermal: props.resultData.thermal_conductivity?.toFixed(2) || '-',
		electrical: props.resultData.electrical_conductivity?.toFixed(0) || '-',
		similarAlloys: props.resultData.similar_alloys || [],
		similarityInfo: props.resultData.similarity_info_zh || '',
	}
})

const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 0) {
		return 'even-row'
	} else {
		return 'odd-row'
	}
}
</script>

<template>
	<div class="result-container">
		<!-- 加载状态 -->
		<div v-if="isLoading" class="progress-card">
			<div class="progress-header">
				<div class="progress-icon">
					<div class="icon-animation">
						<svg viewBox="0 0 24 24" width="24" height="24">
							<path
								d="M13 3V9H21V3H13M13 21H21V11H13V21M3 21H11V15H3V21M3 13H11V3H3V13Z"
								fill="currentColor"
							/>
						</svg>
					</div>
				</div>
				<div class="progress-title">正在计算合金特性</div>
				<div class="progress-subtitle">请稍候，这可能需要几秒钟</div>
			</div>

			<div class="progress-wrapper">
				<div class="progress-bar">
					<div
						class="progress-fill"
						:style="{ width: `${currentPercentage}%` }"
					></div>
				</div>
				<div class="progress-text">
					<span class="percentage">{{ currentPercentage }}</span>
					<span class="unit">%</span>
				</div>
			</div>

			<div class="progress-steps">
				<div
					v-for="(step, index) in steps"
					:key="index"
					class="step-item"
					:class="{
						active: index < currentStep,
						current: index === currentStep - 1,
					}"
				>
					<div class="step-icon">
						<span v-if="index < currentStep - 1" class="check-icon">✓</span>
						<span v-else-if="index === currentStep - 1" class="current-icon">
							<div class="pulse-dot"></div>
						</span>
						<span v-else class="step-number">{{ index + 1 }}</span>
					</div>
					<div class="step-content">
						<div class="step-text">{{ step.text }}</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 结果展示 -->
		<div
			v-else-if="Object.keys(props.resultData).length"
			class="results-section"
		>
			<div class="results-grid">
				<div class="result-card">
					<h3>热导率</h3>
					<div class="result-value">{{ resultValues.thermal }}</div>
					<div class="result-unit">W·m⁻¹·K⁻¹</div>
				</div>
				<div class="result-card">
					<h3>电导率</h3>
					<div class="result-value">{{ resultValues.electrical }}</div>
					<div class="result-unit">S·m⁻¹</div>
				</div>
			</div>

			<div v-if="resultValues.similarAlloys.length" class="similar-data">
				<h3>📋 相似合金数据</h3>
				<div v-if="resultValues.similarityInfo" class="similarity-info">
					{{ resultValues.similarityInfo }}
				</div>

				<el-table
					:data="resultValues.similarAlloys"
					border
					stripe
					style="width: 100%"
					class="similar-alloy-table"
					:row-class-name="tableRowClassName"
				>
					<el-table-column prop="index" label="序号" width="80" align="center">
						<template #default="{ $index }">
							{{ $index + 1 }}
						</template>
					</el-table-column>

					<el-table-column prop="Formula [at.%]" label="成分" min-width="180">
						<template #default="{ row }">
							{{ row['Formula [at.%]'] || row.composition || '-' }}
						</template>
					</el-table-column>

					<el-table-column
						prop="T [K]"
						label="温度(K)"
						width="120"
						align="center"
					>
						<template #default="{ row }">
							{{
								row['T [K]'] ? parseInt(row['T [K]']) : row.temperature || '-'
							}}
						</template>
					</el-table-column>

					<el-table-column
						v-if="
							['both', 'thermal'].includes(props.resultData.calculation_type)
						"
						label="热导率"
						width="150"
						align="center"
					>
						<template #default="{ row }">
							{{
								row['λ [W·m-1·K-1]']
									? parseFloat(row['λ [W·m-1·K-1]']).toFixed(2)
									: row.thermal?.toFixed(2) || '-'
							}}
						</template>
					</el-table-column>

					<el-table-column
						v-if="
							['both', 'electrical'].includes(props.resultData.calculation_type)
						"
						label="电导率"
						width="150"
						align="center"
					>
						<template #default="{ row }">
							{{ row['σ [S·m-1]'] || row.electrical || '-' }}
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<div class="empty-container" v-else>
			<div class="empty-content">
				<div class="empty-icon">
					<svg viewBox="0 0 24 24" width="48" height="48">
						<path
							d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
							fill="currentColor"
						/>
					</svg>
				</div>
				<div class="empty-text">等待计算</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
/* 进度卡片样式 */
.progress-card {
	background: #f8f9fa;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	width: 700px;
	margin: 0 auto;
}

.progress-header {
	text-align: center;
	margin-bottom: 24px;
}

.progress-icon {
	margin-bottom: 16px;
}

.icon-animation {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 64px;
	height: 64px;
	background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
	border-radius: 50%;
	color: white;
	animation: pulse 1.5s infinite;
}

.icon-animation svg {
	animation: rotate 2s linear infinite;
}

.progress-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 8px;
	color: #2c3e50;
}

.progress-subtitle {
	font-size: 1rem;
	color: #7f8c8d;
}

/* 进度条 */
.progress-wrapper {
	margin: 32px 0;
}

.progress-bar {
	height: 10px;
	background: #e0e0e0;
	border-radius: 5px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	border-radius: 5px;
	transition: width 0.3s ease;
}

.progress-text {
	text-align: center;
	margin-top: 16px;
	font-size: 1.8rem;
	font-weight: 700;
	color: #2c3e50;
}

/* 步骤指示器 */
.progress-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.step-item {
	position: relative;
	padding: 12px;
	border-radius: 12px;
	background: #f1f8ff;
	transition: all 0.3s ease;
}

.step-item.active {
	background: #e3f2fd;
	box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

.step-item.current {
	background: #bbdefb;
	transform: translateY(-3px);
}

.step-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 8px;
}

.check-icon {
	color: #4caf50;
	font-size: 1.2rem;
	font-weight: bold;
}

.current-icon {
	position: relative;
	width: 24px;
	height: 24px;
}

.pulse-dot {
	position: absolute;
	width: 8px;
	height: 8px;
	background: #2196f3;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: pulse-dot 1.5s infinite;
}

.step-number {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #90a4ae;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
}

.step-text {
	text-align: center;
	font-size: 0.9rem;
	color: #37474f;
	font-weight: 500;
}

/* 结果区域 */
.results-section {
	background: white;
	border-radius: 16px;
	box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
	padding: 30px;
	max-width: 900px;
	margin: 0 auto;
	animation: fadeIn 0.6s ease;
}

.results-header h2 {
	font-size: 1.8rem;
	color: #2c3e50;
	margin-bottom: 30px;
	text-align: center;
}

.results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-bottom: 40px;
}

.result-card {
	background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
	border-radius: 16px;
	padding: 30px;
	text-align: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.result-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(33, 150, 243, 0.2);
}

.result-card h3 {
	font-size: 1.3rem;
	color: #37474f;
	margin-bottom: 15px;
}

.result-value {
	font-size: 3rem;
	font-weight: 800;
	color: #2196f3;
	margin: 15px 0;
}

.result-unit {
	font-size: 1.1rem;
	color: #78909c;
}

/* 相似数据表格 */
.similar-data {
	margin-top: 40px;
}

.similar-data h3 {
	font-size: 1.4rem;
	color: #2c3e50;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.similarity-info {
	background: #e3f2fd;
	border-left: 4px solid #2196f3;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 0 8px 8px 0;
	font-size: 1rem;
	color: #37474f;
}

.table-wrapper {
	overflow-x: auto;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	min-width: 700px;
}

.data-table th {
	background: #f5f7fa;
	padding: 16px;
	text-align: left;
	font-weight: 600;
	color: #37474f;
	border-bottom: 2px solid #e0e0e0;
}

.data-table td {
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
	color: #546e7a;
}

.data-table tbody tr:hover {
	background-color: #f8fdff;
}

.empty-container {
	text-align: center;
	color: var(--theme-content-text-muted);
	width: 200px;
	background: var(--theme-card-bg);
	border: 1px solid var(--theme-card-border);
	border-radius: 16px;
	padding: 40px;
	box-shadow: var(--theme-card-shadow);
	backdrop-filter: var(--backdrop-blur);
	transition: all 0.3s ease;

	&:hover {
		transform: translateY(-2px);
		box-shadow: var(--theme-card-shadow-hover);
	}

	.empty-content {
		margin-top: 24px;

		.empty-icon {
			margin-bottom: 24px;
			color: var(--theme-content-text-muted);
			animation: float 3s ease-in-out infinite;

			svg {
				filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
			}
		}

		.empty-text {
			font-size: 18px;
			font-weight: 600;
			color: var(--theme-content-text-muted);
		}
	}
}

/* 动画定义 */
@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 0 0 15px rgba(33, 150, 243, 0);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes pulse-dot {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0.7;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>
